<template>
    <el-row class="lives-news" id="articleList">
        <el-row>
            <el-col class="title">
                <h3>个人简介</h3>
            </el-col>
        </el-row>
        <el-row>
            <el-form :inline="true" class="inline-form">
                <el-form-item>
                    <el-button @click="addConfig" type="primary"><i class="el-icon-edit el-icon--left"></i>修改</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-col class="ql-editor">
                <div v-html="personIntroduce"></div>
            </el-col>
        </el-row>
        <el-dialog title="个人简介" :visible.sync="addDialog" size="tiny" @close="cancelAddCategory" class="dialog" center>
            <el-form :model="msg" label-width="0">
                <el-form-item class="quill-box">
                    <quill-editor class="quill" v-model="msg.value" ref="myQuillEditor" :options="editorOption">
                    </quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddCategory">取 消</el-button>
                <el-button type="primary" @click="setPersonal">保 存</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
import {
	getStorageBykey,
    addStorages,
    updateStorageByKey
} from '@/api/api'
import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
        quillEditor
    },
    data: function() {
        return {
            personIntroduce: '',
            addDialog: false,
            value: '',
            msg: {
            	key:'personal_profile',
                value: ''
            },
            editorOption :{
            }
        }
    },
    created: function() {
        this.getPerson();
    },
    methods: {
    	getPerson:function(){
    		getStorageBykey('personal_profile').then(res => {
                this.personIntroduce = res.value;
            })
    	},
        setPersonal: function() {
            if (!this.msg.value) {
                this.$message({
                    type: 'error',
                    message: '请输入个人简介'
                })
                return;
            }
            updateStorageByKey(this.msg).then(res => {
                console.log(res)
                this.personIntroduce = this.msg.value;
                this.cancelAddCategory()
            })
        },
        addConfig: function() {
            this.addDialog = true;
            this.msg.value = this.personIntroduce;
        },
        cancelAddCategory: function() {
            this.addDialog = false;
        }
    }
}

</script>
<style scoped>
.quill-box {
    height: 450px;
}

.quill-box .quill {
    height: 350px;
}

.lives-news .title {
    font-size: 12px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 5px;
}

.lives-news h3 {
    display: inline-block;
    padding: 5px 0;
    margin: 0;
    font-weight: normal;
    color: #23b7e5;
    border-bottom: 1px solid #23b7e5;
}

</style>
